<template>
    <countTo :startVal="options.startVal" :endVal="options.endVal" :duration="options.duration"
        :autoplay="options.autoplay" :decimals="options.decimals" :decimal="options.decimal"
        :separator="options.separator" :prefix="options.prefix" :suffix="options.suffix">
    </countTo>
</template>
<script>
// 数字翻页效果
import countTo from 'vue-count-to';
export default {
    name: 'ZSCountTo',
    components: { countTo },
    data() {
        return {
            options: {
                // 开始值
                startVal: 0,
                // 结束值
                endVal: 0,
                // 持续时间 ms
                duration: 1000,
                // 自动播放
                autoplay: true,
                // 要显示的小数位
                decimals: 0,
                // 十进制分割
                decimal: '',
                // 分隔符
                separator: '',
                // 前缀
                prefix: '',
                // 后缀
                suffix: '',
                // 使用缓和功能
                useEasing: true,
                // 缓和回调
            },
        }
    },
    mounted() {
        this.options = {
            ...this.options,
            ...this.setting,
            endVal: this.numFormater(this.value)
        }
    },
    props: {
        value: {
            type: [Number, String],
            default: () => 0
        },
        setting: {
            type: Object,
            default: () => { }
        }
    },
    methods: {
        numFormater(val) {
            return Number(val);
        }
    },
    watch: {
        setting() {
            this.options = {
                ...this.options,
                ...this.setting,
            }
        },
        value: {
            handler(nVal, oldV) {
                this.options = {
                    ...this.options,
                    startVal: this.numFormater(oldV),
                    endVal: this.numFormater(nVal)
                }
            },
            deep: true,
            immediate: false
        },
    }
}
</script>
<style lang="less" scoped></style>
